<template>
  <div>
    <head-top routerName="orderManagement" title="订单管理"></head-top>
    <div class="content-wrap">
      <van-tabs v-model="active" @click="tabClick">
        <template v-for="(item, index) in nav">
          <van-tab
            :title="item.label"
            :key="index"
            :name="item.navCurrentStatus"
            v-if="index < 5"
          ></van-tab>
        </template>
      </van-tabs>
      <div class="list">
        <van-pull-refresh
          v-model="refreshing"
          success-text="刷新成功"
          @refresh="onLoad"
        >
          <van-list v-model="loading" :finished="finished" @load="onLoad">
            <ul>
              <template v-for="(item, index) in list">
                <li :key="index" v-if="formatList(item.status)">
                  <div class="shadow" @click="detailsShow(item)">
                    <div class="content">
                      <van-image fit="cover" :src="item.url" />
                      <div class="info">
                        <div class="name">{{ item.goodsName }}</div>
                        <div class="info-bottom">
                          <div class="price">
                            {{ item.amount | formatFront
                            }}<span class="decimal">{{
                              item.amount | formatAfter
                            }}</span>
                            <span class="company">元宝</span>
                            <span class="number">×{{ item.num }}</span>
                          </div>
                          <!-- <div class="stock">库存199</div> -->
                          <div class="state">
                            {{ item.status | formatStatus }}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="content-footer" v-if="item.status === '1'">
                      <div
                        class="deliverGoods"
                        @click.stop="$refs.logistics.show(item)"
                      >
                        发货
                      </div>
                    </div>
                  </div>
                  <div class="shadow">
                    <div class="order">订单编号：{{ item.orderNo }}
                      <span :class="'orderNo'+index"
                        :data-clipboard-text="item.orderNo"
                        @click="copy('.orderNo'+index)"
                        v-if="item.orderNo"
                        >复制</span>
                    </div>
                    <div class="paymentTime">
                      付款时间：{{ item.payTime | formatDate }}
                    </div>
                  </div>
                </li>
              </template>
              <goods-null
                v-if="isListNull && !loading"
                describe="您还没有相关订单"
              ></goods-null>
            </ul>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
    <form-logistics ref="logistics" @load="onLoad"></form-logistics>
  </div>
</template>
<script>
import { Tab, Tabs, Image as VanImage ,Toast,PullRefresh,List,} from "vant";
import HeadTop from "@/components/head";
import goodsNull from "@/components/null/goodsNull";
import { storeOrder } from "@/api/orderManagement";
import { formatDate } from "@/assets/js/date";
import { statusList } from "./statusList";
import Clipboard from "clipboard";
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [VanImage.name]: VanImage,
    [Toast.name]: Toast,
    [PullRefresh.name]: PullRefresh,
    [List.name]: List,
    HeadTop,
    goodsNull,
    formLogistics: (resolve) => require(["./logistics"], resolve),
  },
  data() {
    return {
      nav: statusList(),
      list: [],
      status: ["1","2","3","5","6","7"],
      refreshing: false,
      loading: false,
      finished: false,
    };
  },
  filters: {
    formatDate(date) {
      var date = new Date(date);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
    formatFront(text) {
      return text.substring(0, text.indexOf("."));
    },
    formatAfter(text) {
      return text.substr(text.lastIndexOf("."));
    },
    formatStatus(statusId) {
      var status = statusList().find((item) => item.status === statusId);
      if (status) {
        return status.message;
      }
    },
  },
  computed: {
    formatList() {
      return function (status) {
        return this.status.indexOf(status) !== -1;
      };
    },
    isListNull() {
      return !this.list.some((item) =>
        this.status.some((ele) => ele === item.status)
      );
    },
  },
   watch: {
    $route(to, from) {
      if(to.meta.index === 1 ){
        this.onLoad()
      }
    },
  },
  methods: {
    onLoad() {
      storeOrder({}).then((res) => {
        this.loading = false;
        this.refreshing = false;
        this.finished = true;
        this.list = res.data.resultData;
      });
    },
    tabClick(status) {
      this.status = status;
    },
    detailsShow(query) {
      this.$router.push({
        name: "orderManagementDetails",
        query,
      });
    },
    copy(id) {
      const clipboard = new Clipboard(id);
      this.$nextTick(() => {
        clipboard.on("success", (e) => {
          Toast("复制成功");
          clipboard.destroy();
        });
        clipboard.on("error", (e) => {
          Toast("复制失败");
          clipboard.destroy();
        });
      });
    },
  },
};
</script>
<style lang="less" scoped>
.content-wrap {
  .van-pull-refresh {
    overflow: inherit;
    /deep/.van-pull-refresh__track {
      min-height: 70vh;
    }
  }
  /deep/.van-loading {
    margin: 0;
  }
  .van-tabs {
    z-index: 2;
    /deep/.van-tabs__nav {
      padding: 0;
      .van-tab {
        padding: 0;
        .van-tab__text {
          font-size: 12px;
          font-weight: 400;
          color: #333333;
        }
        &.van-tab--active {
          span {
            font-weight: bold;
          }
        }
      }
      .van-tabs__line {
        bottom: 8px;
        height: 2px;
        max-width: 16px;
        border-radius: 0;
        background: #333333;
      }
    }
  }
  .list {
    ul {
      li {
        .shadow {
          margin-top: 13px;
          box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
          border-radius: 4px;
          padding: 10px;
          .content {
            display: flex;
            .van-image {
              display: block;
              flex: 80px 0 0;
              width: 80px;
              height: 80px;
            }
            .info {
              flex: 1;
              padding-left: 10px;
              .name {
                height: 36px;
                font-size: 14px;
                font-weight: 400;
                color: #333333;
                line-height: 18px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
              .info-bottom {
                margin-top: 26px;
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                .price {
                  height: 18px;
                  font-size: 18px;
                  font-weight: bold;
                  color: #f34a38;
                  line-height: 18px;
                  .decimal {
                    height: 12px;
                    font-size: 12px;
                    line-height: 12px;
                  }
                  .company {
                    margin-left: 2px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #333333;
                    line-height: 12px;
                  }
                  .number {
                    margin-left: 8px;
                    height: 11px;
                    font-size: 11px;
                    font-weight: 400;
                    color: #666666;
                    line-height: 11px;
                  }
                }
                .state {
                  font-size: 11px;
                  font-weight: 400;
                  color: #f34a38;
                  line-height: 11px;
                }
              }
            }
          }
          .content-footer {
            margin-top: 11px;
            padding: 10px 0 0 90px;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: flex-end;
            .deliverGoods {
              width: 68px;
              height: 28px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 12px;
              font-weight: 400;
              color: #eb5545;
              text-align: center;
              border-radius: 14px;
              border: 1px solid #eb5545;
            }
          }
          .order,
          .paymentTime {
            font-size: 11px;
            font-weight: 400;
            color: #333333;
            line-height: 11px;
            span {
              padding-right: 7px;
              float: right;
              color: #f34a38;
            }
          }
          .paymentTime {
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>
